<template>
  <!-- <div>reports/reports 组件</div> -->

  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 50%; height: 400px; display: inline-block"></div>
  <div id="box" style="width: 50%; height: 400px; display: inline-block"></div>
</template>

<script setup>
import * as echarts from 'echarts'

import { onMounted } from 'vue'

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  })
})

// 饼状态图

onMounted(() => {
  var chartDom = document.getElementById('box')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['Apple', 'Grapes', 'Pineapples', 'Oranges', 'Bananas'],
    },
    series: [
      {
        type: 'pie',
        data: [
          {
            value: 335,
            name: 'Apple',
          },
          {
            value: 310,
            name: 'Grapes',
          },
          {
            value: 234,
            name: 'Pineapples',
          },
          {
            value: 135,
            name: 'Oranges',
          },
          {
            value: 1548,
            name: 'Bananas',
          },
        ],
        radius: ['62%', '100%'],
      },
    ],
  }

  option && myChart.setOption(option)
})
</script>

<style lang="scss" scoped></style>
